<script>
import { getAction } from '@api/manage'

export default {
  name: 'WorkInboundRecordLabelListPrintModal',
  data() {
    return {
      title: '',
      width: 800,
      visible: false,
      disableSubmit: false,
      model: {},
      selectedRowKeys: [],
      selectionRows: [],
      dataSource: [],
      loading: false,
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 40,
          align: 'center',
          fixed: 'left',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '计划单号',
          align: 'center',
          dataIndex: 'planNumber',
          width: '110px'
        },
        {
          title: '物料编码',
          align: 'center',
          dataIndex: 'materialCode'
        },
        {
          title: '物料名称',
          align: 'center',
          dataIndex: 'materialName'
        },
        {
          title: '规格型号',
          align: 'center',
          dataIndex: 'specificationModel'
        },
        {
          title: '单位',
          align: 'center',
          dataIndex: 'unit_dictText'
        },
        {
          title: '批次号',
          align: 'center',
          dataIndex: 'batchNumber'
        },
        {
          title: '物料批号',
          align: 'center',
          dataIndex: 'materialBatchNumber'
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'quantity'
        }
      ]
    }
  },
  methods: {
    list(record) {
      if (!record || !record.code) {
        return
      }
      this.model = Object.assign({}, record)
      this.fetchData()
      this.visible = true
    },
    fetchData() {
      getAction('/wms/inbound/work-inbound-label/list', { planNumber: this.model.code })
        .then(({ result }) => {
          if (result) {
            this.dataSource = result
          }
        })
    },
    handleOk() {
      if (!this.selectionRows || this.selectionRows.length <= 0) {
        this.$message.error('请选择要打印的批次')
        return
      }
      const ids = this.selectionRows.map((item) => item.id).join('\',\'')
      window.open(`${window._CONFIG['domianURL']}/jmreport/view/1099911005488357376?id=${ids}`, '_blank')
      this.$emit('ok')
      this.close()
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.dataSource = []
      this.onClearSelected()
      this.$emit('close')
      this.visible = false
    },
    onClearSelected() {
      this.selectedRowKeys = []
      this.selectionRows = []
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    }
  }
}
</script>

<template>
  <j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    fullscreen
    okText="打印"
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    cancelText="关闭"
    @cancel="handleCancel">
    <div>
      <div class="ant-alert ant-alert-info" style="margin: 16px 0;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a
        style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="inbound_order_item_id"
        class="j-table-force-nowrap1"
        :scroll="{x:true}"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      >
      </a-table>
    </div>
  </j-modal>
</template>

<style scoped>

</style>